<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://pv.sohu.com/cityjson"></script> -->
    <title>About Device</title>
    <style>
      .garden {
        position: relative;
        width: 200px;
        height: 200px;
        border: 5px solid #ccc;
        border-radius: 10px;
      }

      .ball {
        position: absolute;
        top: 90px;
        left: 90px;
        width: 20px;
        height: 20px;
        background: green;
        border-radius: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h2>位置信息</h2>
      <ul>
        <li>IP: {{location.cip}}</li>
        <li>地区代码: {{location.cid}}</li>
        <li>所在地: {{location.cname}}</li>
        <li>纬度: {{latitude}}</li>
        <li>经度: {{longitude}}</li>
      </ul>
      <h2>浏览器信息</h2>
      <ul>
        <li>userAgent: {{navigator.userAgent}}</li>
        <li>appName: {{navigator.appName}}</li>
        <li>appCodeName: {{navigator.appCodeName}}</li>
        <li>appVersion: {{navigator.appVersion}}</li>
        <li>appMinorVersion: {{navigator.appMinorVersion}}</li>
        <li>platform: {{navigator.platform}}</li>
        <li>cookieEnabled: {{navigator.cookieEnabled}}</li>
        <li>onLine: {{navigator.onLine}}</li>
        <li>language: {{navigator.language}}</li>
        <li v-for="(item,index) in navigator.mimeTypes" :key="item.type">
          {{item.type}}: {{item.description}}
        </li>
      </ul>
      <h2>硬件信息</h2>
      <ul>
        <li>GPU: {{gpu}}</li>
      </ul>
      <h2>屏幕信息</h2>
      <ul>
        <li>网页可见区域宽: {{body.clientWidth}}</li>
        <li>网页可见区域高: {{body.clientHeight}}</li>
        <li>网页可见区域宽(包括边线和滚动条的宽): {{body.offsetWidth}}</li>
        <li>网页可见区域高(包括边线的宽): {{body.offsetHeight}}</li>
        <li>网页正文全文宽: {{body.scrollWidth}}</li>
        <li>网页正文全文高: {{body.scrollHeight}}</li>
        <li>网页被卷去的高: {{body.scrollTop}}</li>
        <li>网页被卷去的左: {{body.scrollLeft}}</li>
        <li>网页正文部分上: {{screenTop}}</li>
        <li>网页正文部分左: {{screenLeft}}</li>
        <li>屏幕物理分辨率的宽: {{screen.width}}</li>
        <li>屏幕物理分辨率的高: {{screen.height}}</li>
        <li>屏幕可用工作区宽度: {{screen.availWidth}}</li>
        <li>屏幕可用工作区高度: {{screen.availHeight}}</li>
        <li>屏幕缩放因子: {{devicePixelRatio}}</li>
        <li>
          屏幕逻辑分辨率:
          {{screen.width*devicePixelRatio}}*{{screen.height*devicePixelRatio}}
        </li>
      </ul>
    </div>
    <div class="garden">
      <div class="ball" onclick="handleClick"></div>
    </div>

    <pre class="output"></pre>
    <script>
      var ball = document.querySelector('.ball');
      var garden = document.querySelector('.garden');
      var output = document.querySelector('.output');

      var maxX = garden.clientWidth - ball.clientWidth;
      var maxY = garden.clientHeight - ball.clientHeight;

      function handleOrientation(event) {
        var x = event.beta; // In degree in the range [-180,180]
        var y = event.gamma; // In degree in the range [-90,90]

        output.innerHTML = 'beta : ' + x + '\n';
        output.innerHTML += 'gamma: ' + y + '\n';

        // Because we don't want to have the device upside down
        // We constrain the x value to the range [-90,90]
        if (x > 90) {
          x = 90;
        }
        if (x < -90) {
          x = -90;
        }

        // To make computation easier we shift the range of
        // x and y to [0,180]
        x += 90;
        y += 90;

        // 10 is half the size of the ball
        // It center the positioning point to the center of the ball
        ball.style.top = (maxX * x) / 180 - 10 + 'px';
        ball.style.left = (maxY * y) / 180 - 10 + 'px';
      }
      document.querySelector('.ball').onclick = function () {
        if (window.DeviceOrientationEvent.requestPermission) {
          window.DeviceOrientationEvent.requestPermission().then((state) => {
            if (state === 'granted') {
              //允许
              console.log('用户允许', state);
              window.addEventListener('deviceorientation', handleOrientation);
            } else if (state === 'denied') {
              //拒绝
              console.error('用户拒绝', state);
            } else if (state === 'prompt') {
              console.error('用户干了啥', state);
            }
          });
        } else {
          window.addEventListener('deviceorientation', handleOrientation);
        }
      }
    </script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          latitude: '',
          longitude: '',
          location: returnCitySN,
          navigator,
          body: document.body,
          screen: screen,
          screenTop,
          screenLeft,
          devicePixelRatio,
          gpu: '',
        },
        created() {
          let canvas = document.createElement('canvas');
          let gl = canvas.getContext('experimental-webgl');
          let debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
          this.gpu = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) => {
              this.latitude = position.coords.latitude;
              this.longitude = position.coords.longitude;
            });
          }
        },
      });
    </script>
  </body>
</html>
